<template>
  <div class="recommendedContent">
    <!-- 默认图文样式 -->
    <section
      v-show="!datas.imageList ||  !datas.imageList[0]"
      :class="[datas.commodityType === 1 ? 'defaultcommodityList1' : '']"
      class="defaultcommodity">
      <div
        v-for="index in 3"
        :key="index"
        class="defaultcommodityList"
        :class="[
          datas.commodityType === 0 ? 'defaultcommodityList0' : '',
          datas.commodityType === 1 ? 'defaultcommodityList1' : '',
          datas.commodityType === 2 ? 'defaultcommodityList2' : '',
          datas.commodityType === 3 ? 'defaultcommodityList3' : '',
        ]"
        :style="{
          'border-radius': datas.borderRadius + 'px',
          border: datas.moditystyle === 2 ? '1px solid rgba(50,50,51,0.1)' : '',
          'box-shadow': datas.moditystyle === 0 ? '0 2px 8px rgba(93,113,127,0.08)' : '',
        }">
        <!-- 图片 -->
        <div class="imgss" :class="[datas.positions === 'top' ? 'containoptions' : '']">
          <img draggable="false" src="../../../../assets/images/imgs.png" alt="" />
          <!-- 文字内容 -->
          <div class="text" :class="[datas.positions === 'top' ? 'positionsTop' : '']">
            <!-- 名称 -->
            <p v-show="datas.commodityType !== 3">这里显示名称,最多显示2行</p>
            <!-- 描述 -->
            <span v-show="datas.commodityType !== 3">这里显示描述</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 图文样式 -->
    <section
      v-show="datas.imageList && datas.imageList[0]"
      :class="[datas.commodityType === 2 ? 'defaultcommodityList2' : '']"
      class="defaultcommodity">
      <div
        v-for="(item, index) in datas.imageList"
        :key="index"
        class="defaultcommodityList"
        :class="[
          datas.commodityType === 0 ? 'defaultcommodityList0' : '',
          datas.commodityType === 1 ? 'defaultcommodityList1' : '',
          datas.commodityType === 2 ? 'defaultcommodityList2' : '',
          datas.commodityType === 3 ? 'defaultcommodityList3' : '',
        ]"
        :style="{
          'border-radius': datas.borderRadius + 'px',
          border: datas.moditystyle === 2 ? '1px solid rgba(50,50,51,0.1)' : '',
          'box-shadow': datas.moditystyle === 0 ? '0 2px 8px rgba(93,113,127,0.08)' : '',
        }">
        <!-- 图片 -->
        <div class="imgss" :class="[datas.positions === 'top' ? 'containoptions' : '']">
          <img v-if="!item.src" src="../../../../assets/images/imgs.png" />
          <img v-else draggable="false" :src="item.src" alt="" />
          <!-- 文字内容 -->
          <div class="text" :class="[datas.positions === 'top' ? 'positionsTop' : '']">
            <div class="textTitle">
              <!-- 名称 -->
              <p v-show="datas.commodityType !== 3">{{ item.name }}</p>
              <!-- 描述 -->
              <span v-show="datas.commodityType !== 3">{{ item.desc }}</span>
            </div>
          </div>
        </div>
        <img class="padvip" v-show="item.isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
      </div>
    </section>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>
<script>
export default {
  name:'recommendedContent',
  props: {
    datas: Object,
  },
  data() {
    return {
      active: 0,
    };
  },
  created() {},
  methods: {
    onTextClick () {
      // TODO: 用 data 监听props
      console.log('onTextClick------', this.datas);
      // this.datas.commodityType = 5;
      this.$forceUpdate();
    }
  },
}
</script>
<style lang="scss" scoped>
.recommendedContent {
  position: relative;

  /* 默认图文 */
  .defaultcommodity {
    box-sizing: border-box;
    margin: 1px;
    // padding: 0 15px;
    /* 列表 */
    .defaultcommodityList {
      position: relative;
      margin-bottom: 15px;
      overflow: hidden;
      display: inline-flex;

      /* 一行一个 */
      &.defaultcommodityList0 {
        width: 292px;
        flex-direction: column;
        .imgss {
          position: relative;
          img {
            height: 112px;
          }
          /* 文字 */
          .text {
            padding: 10px 6px;
            box-sizing: border-box;
            position: absolute;
            left: 10px;
            top: 10px;
            color: #260C70;
            text-align: left;
            /* 名称 */
            span{
              font-size:12px;
              width: 100%;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            p{
              font-size: 14px;
              line-height: 20px;
              margin: 0 0 5px;
              font-weight: bold;
              width: 100%;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
        }
      }

       /* 一行一个2 */
      &.defaultcommodityList1 {
        width: 292px;
        height: 238px;
        .imgss {
          position: relative;
          height: 238px;
          img {
            height: 100%;
          }
          /* 文字 */
          .text {
            padding: 10px 6px;
            box-sizing: border-box;
            position: absolute;
            left: 10%;
            top: 10px;
            color: #260C70;
            /* 名称 */
            span{
              font-size:12px;
              width: 100%;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            p{
              font-size: 18px;
              line-height: 30px;
              font-weight: bold;
              width: 100%;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
        }
      }

      /*一行两个 */
      &.defaultcommodityList2 {
        width: 48%;
        height: 112px;
        flex: none;
        margin-right: 2%;
        flex-direction: column;
        flex-wrap:nowrap;
        &:nth-of-type(2n) {
          margin-right: 0 !important;
        }
        .imgss {
          position: relative;
          height: 112px;
          img {
            height: 100%;
          }
          /* 文字 */
          .text {
            padding: 10px 6px;
            box-sizing: border-box;
            position: absolute;
            left: 5px;
            top: 10px;
            color: #260C70;
            text-align: left;
            /* 名称 */
            span{
              font-size:12px;
              width: 100%;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            p{
              font-size: 14px;
              line-height: 20px;
              margin: 0 0 5px;
              font-weight: bold;
              width: 100%;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
        }
      }

      /*一行三个 */
      &.defaultcommodityList3 {
        width: 31%;
        height: 112px;
        flex: none;
        margin-right: 2%;
        flex-direction: column;
        flex-wrap:nowrap;
        &:nth-of-type(3n) {
          margin-right: 0 !important;
        }
        .imgss {
          position: relative;
          height: 112px;
          img {
            height: 100%;
          }
        }
      }

      .padvip{
        position: absolute;
        top: 0;
        right: 0;
        width: 44px;
        height: 44px;
      }

      /* 图片 */
      img {
        width: 100%;
        // height: 100%;
        display: block;
        overflow: hidden;
      }
    }
  }
}
</style>
